<template>
  <el-container>
    <el-main>
      <!-- 头部 -->
      <div class="header">
        <el-row class="header-bar">
          <el-text class="mx-1" size="large">仓库</el-text>
        </el-row>
      </div>

      <!-- 材料类别选择框 -->
      <el-select v-model="selectedCategory" placeholder="选择材料类别" @change="handleCategoryChange" style="margin-bottom: 20px;">
        <el-option label="全部" value=""></el-option>
        <el-option
            v-for="item in categories"
            :key="item"
            :label="item"
            :value="item">
        </el-option>
      </el-select>

      <!-- 材料信息表格 -->
      <el-table :data="materials" style="width: 100%">
        <el-table-column prop="materialId" label="材料编号" width="180"></el-table-column>
        <el-table-column prop="materialName" label="材料名称" width="180"></el-table-column>
        <el-table-column prop="materialDescription" label="材料描述"></el-table-column>
        <el-table-column prop="quantity" label="数量" width="100"></el-table-column>
        <el-table-column prop="category" label="材料类别" width="180"></el-table-column>
      </el-table>

      <!-- 分页组件 -->
      <el-pagination
          @current-change="handlePageChange"
          :current-page="currentPage"
          :page-size="pageSize"
          layout="prev, pager, next"
          :total="total"
          style="margin-top: 20px;"
      />

      <!-- 库存量小于10的材料表格 -->
      <h3 style="margin-top: 20px;">库存较少的材料</h3>
      <el-table :data="lowStockMaterials" style="width: 100%; margin-top: 20px;">
        <el-table-column prop="materialId" label="材料编号" width="180"></el-table-column>
        <el-table-column prop="materialName" label="材料名称" width="180"></el-table-column>
        <el-table-column prop="materialDescription" label="材料描述"></el-table-column>
        <el-table-column prop="quantity" label="数量" width="100"></el-table-column>
        <el-table-column prop="category" label="材料类别" width="180"></el-table-column>
      </el-table>
    </el-main>
  </el-container>
</template>

<script setup>
import { ref, computed, watch } from 'vue';
import axios from 'axios';

const materials = ref([]);
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);
const selectedCategory = ref('');
const categories = ref([]);

// 获取材料数据
const fetchMaterials = async (page = 1, category = '') => {
  try {
    const response = await axios.get('http://localhost:8080/materials-manage/selectPage', {
      params: { page, size: pageSize.value, category: category || undefined }
    });
    materials.value = response.data.records;
    total.value = response.data.total;
    currentPage.value = response.data.current;
    if (!categories.value.length) {
      categories.value = Array.from(new Set(response.data.records.map(item => item.category)));
    }
  } catch (error) {
    console.error('Error fetching materials:', error);
  }
};

const handlePageChange = (page) => {
  currentPage.value = page;
  fetchMaterials(currentPage.value, selectedCategory.value);
};

const handleCategoryChange = () => {
  currentPage.value = 1;
  fetchMaterials(currentPage.value, selectedCategory.value);
};

const lowStockMaterials = computed(() => {
  return materials.value.filter(material => material.quantity < 10);
});

// 初次加载数据
fetchMaterials();

watch(selectedCategory, () => {
  handleCategoryChange();
});

watch(currentPage, () => {
  fetchMaterials(currentPage.value, selectedCategory.value);
});
</script>

<style scoped>
.header {
  position: sticky;
  background-color: #f5f5f5;
  padding: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.el-main {
  padding: 20px;
  margin-left: 20px;
}
</style>
